import { DOMcreateElement } from "@/core/jsxFactory";
import { getTop,getLeft,getWidth,getHeight ,getGridWidth,getGridHeight} from "@/core/locationService";
import { currentGridInfo } from "../playground/backgroundCanvas";
import StructElement, { ElementLocationSizeMap } from "../StructElement/StructElement";
import StructElementMgr from "../StructElement/StructElementMgr";
import { IStructInitInfo } from "../StructElement/type";
import GridConf from "@/core/GridConf";
export default class Preview{
    private ele:HTMLElement;
    private container:HTMLElement;
    private structElementMgr = StructElementMgr.getInstance();
    constructor(container:HTMLElement){
        this.container = container;
        this.ele = this.create();
        this.container.appendChild(this.ele);
    }
    private previewEvent(){
        const previewContainer = this.createPreviewPlayground();
        document.body.appendChild(previewContainer);
        (this.structElementMgr.getAllStructElmenet()||[]).forEach(structEle=>{
            const [structInfo,sElmenets] = structEle as [IStructInitInfo, StructElement[]];
            console.log(structInfo);
            sElmenets.forEach(ele=>{
                if(ele.show){
                    
                    const previewGridWidth =getGridWidth(previewContainer.offsetWidth,GridConf.widthGridNum,currentGridInfo.waterTank) ,
                        previewGridHeight = getGridWidth(previewContainer.offsetHeight , GridConf.heightGridNum,currentGridInfo.waterTank);
                    console.log(previewContainer.offsetWidth,previewContainer.offsetHeight);
                    Array.from(ElementLocationSizeMap.entries()).forEach(structEle=>{
                        const domElement = this.createPreviewStruct();
                        const [_domElement,structSize] = structEle;
                        console.log(structEle);
                        console.log("structSize",structSize)
                        domElement.setAttribute("style",`
                                position:absolute;
                                background:#f00;
                                width:${getWidth(structSize.width,previewGridWidth,currentGridInfo.waterTank)}px;
                                height:${getHeight(structSize.height,previewGridHeight,currentGridInfo.waterTank)}px;
                                left:${getLeft(structSize.left,previewGridWidth,currentGridInfo.waterTank)}px;
                                top:${getTop(structSize.top,previewGridHeight,currentGridInfo.waterTank)}px;
                            `);
                            previewContainer.appendChild(domElement)
                    })

                   
                }
            })
            // getTop,getLeft,getWidth,getHeight
            
        });
    }
    private createPreviewStruct(){
        return <div>
        </div>
    }
    private createPreviewPlayground(){
        return <div className="preview-playground">
        </div>
    }
    private create(){
        return <div className="fa fa-eye preview-button" onClick={this.previewEvent.bind(this)}>
        </div>
    }
}